<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery的内容选择器</title>
    <script src="../../js/jquery-3.4.1.js"></script>
    <style>
        div {
            width: 50px;
            height: 100px;
            background-color: red;
            margin-top: 5px;
        }
    </style>
</head>
<body>

<div></div>
<div>我是div1</div>
<div>你好, 我是div2</div>
<div><span></span></div>
<div><p></p></div>

<hr />
<ul id="ul_1">
    <li value="1">1</li>
    <li value="2">2</li>
    <li value="3">3</li>
    <li value="4">4</li>
</ul>

</body>
<script>

    $(() => {
        selectEmpty();
        selectParent();
        selectContains();
        selectHas();
        findToElement();
    });

    /**
     * 功能:
     *      用empty关键字选择内容为空并且没有子元素的div.
     * 说明:
     *      1. empty具有连个且的筛选条件:
     *          - 内容为空;
     *          - 并且没有子元素
     */
    function selectEmpty() {
        const divs = $("div:empty");
        console.log(divs);
    }

    /**
     * 功能:
     *      找到有文本内容或者有子节点对象的div.
     * 说明:
     *      1. 查找条件有两个或关系的:
     *          - 内容不为空
     *          - 或者有子元素
     */
    function selectParent() {
        const div = $("div:parent");
        console.log(div);
    }

    /**
     * 功能:
     *      这是根据元素的内容进行选择元素, 这里的代码的意思是: 选择出文本中包含有我是div的元素.
     * 说明:
     *      1. 这个查找方式和mysql中的`select * from user where name like '%王%'`的查找规则是一样的, 只要包含就会查找出.
     */
    function selectContains() {
        const div = $("div:contains('我是div')");
        console.log(div);
    }

    /**
     * 功能:
     *      找到包含指定dom子元素的元素.
     * 说明:
     *      1. has的参数表示dom元素的名称.
     */
    function selectHas() {
        const div = $("div:has('span')");
        console.log(div);
    }

    function findToElement() {
        console.log("------选择子节点------");
        let value = 3;
        $(`#ul_1 li[value='${value}']`).replaceWith(`<h1>aaa</h1>`);
    }

</script>
</html>